<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件读取示例</title>
    <style>
        #fileContent {
            margin-top: 20px;
            font-family: monospace;
            white-space: pre-wrap; /* 保证文本格式 */
        }
        #imageDisplay {
            margin-top: 20px;
            max-width: 100%;
            max-height: 400px;
        }
    </style>
</head>
<body>

    <h1>上传并显示文件内容</h1>

    <!-- 文件上传输入框 -->
    <label for="fileInput">选择一个文件：</label>
    <input type="file" id="fileInput" />

    <div id="fileContent"></div> <!-- 显示文本文件内容 -->
    <img id="imageDisplay" alt="显示图片" /> <!-- 显示图片 -->

    <script>
        // 监听文件输入框变化事件
        document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];  // 获取用户选择的第一个文件
            
            if (file) {
                const reader = new FileReader(); // 创建FileReader对象
                
                // 如果是文本文件
                if (file.type.startsWith('text')) {
                    reader.onload = function(e) {
                        const content = e.target.result;  // 获取文件内容
                        document.getElementById('fileContent').textContent = content;  // 显示文本内容
                        document.getElementById('imageDisplay').style.display = 'none';  // 隐藏图片显示区域
                    };
                    reader.readAsText(file);  // 读取为文本
                } 
                // 如果是图片文件
                else if (file.type.startsWith('image')) {
                    reader.onload = function(e) {
                        const dataURL = e.target.result;  // 获取图片的base64编码
                        document.getElementById('imageDisplay').src = dataURL;  // 显示图片
                        document.getElementById('fileContent').style.display = 'none';  // 隐藏文本显示区域
                    };
                    reader.readAsDataURL(file);  // 读取为数据URL（图片）
                }
            }
        });
    </script>

</body>
</html>
